<script setup>
//用户管理页面
import { ref } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { Search } from '@element-plus/icons-vue';

const originalTableData = ref([
    { name: '张三', nickname: 'zhangsan', iphone: '13812345678', password: '123456', role: '老师', status: '在线' },
    { name: '王五', nickname: 'wangwu', iphone: '13812345678', password: '123456', role: '学生', status: '离线' },
    { name: '李四', nickname: 'lisi', iphone: '13812345678', password: '123456', role: '老师', status: '在线' },
    { name: '赵六', nickname: 'zhaoliu', iphone: '13812345678', password: '123456', role: '学生', status: '在线' },
    { name: '小明', nickname: 'xiaoming', iphone: '13812345678', password: '123456', role: '老师', status: '离线' },
    { name: '小红', nickname: 'xiaohong', iphone: '13812345678', password: '123456', role: '学生', status: '在线' },
    { name: '小刚', nickname: 'xiaogang', iphone: '13812345678', password: '123456', role: '学生', status: '离线' }, 
    { name: '小白', nickname: 'xiaobai', iphone: '13812345678', password: '123456', role: '学生', status: '在线' },
    { name: '小黑', nickname: 'xiaohong', iphone: '13812345678', password: '123456', role: '学生', status: '离线' },
    { name: '小黄', nickname: 'xiaohuang', iphone: '13812345678', password: '123456', role: '学生', status: '在线' },
    { name: '小蓝', nickname: 'xiaobai', iphone: '13812345678', password: '123456', role: '学生', status: '离线' },
    { name: '小紫', nickname: 'xiaozhi', iphone: '13812345678', password: '123456', role: '学生', status: '在线' },
]);

const filterTableData = ref([]);
const searchKeyword = ref('');
const editDialogVisible = ref(false);
const addDialogVisible = ref(false);
const roleModel = ref({
    name: '',
    nickname: '',
    iphone: '',
    password: '',
    role: '',
    status: ''
});


const rules = ref({
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
    iphone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    role: [{ required: true, message: '请选择身份', trigger: 'change' }],
    status: [{ required: true, message: '请选择状态', trigger: 'change' }]
});


const roleOptions = ref([
    { value: '老师', text: '老师' }, 
    { value: '学生', text: '学生' }
]);
const statusOptions = ref([
    { value: '在线', text: '在线' }, 
    { value: '离线', text: '离线' }
]);

const currentPage = ref(1);
const pageSize = 10;


const getFilteredData = () => {
    return originalTableData.value.filter(item => item.name.includes(searchKeyword.value));
};


const fetchData = () => {
    const filteredData = getFilteredData();
    const start = (currentPage.value - 1) * pageSize;
    const end = start + pageSize;
    filterTableData.value = filteredData.slice(start, end);
};

const search = () => {
    currentPage.value = 1;
    fetchData();
};

const showDialog = (row) => {
    editDialogVisible.value = true;
    roleModel.value = { ...row }; 
};

const updateRole = () => {
    const index = originalTableData.value.findIndex(item => item.name === roleModel.value.name);
    if (index !== -1) {
        originalTableData.value[index] = { ...roleModel.value };
    }
    editDialogVisible.value = false;
    fetchData();
};

const deleteData = (row) => {
    const index = originalTableData.value.findIndex(item => item.name === row.name);
    if (index !== -1) {
        originalTableData.value.splice(index, 1);
    }
    fetchData();
};

const showAddDialog = () => {
    addDialogVisible.value = true;
    roleModel.value = { name: '', nickname: '', iphone: '', password: '', role: '', status: '' };
};

const addRole = () => {
    if (originalTableData.value.findIndex(item => item.name === roleModel.value.name) === -1) {
        originalTableData.value.push({ ...roleModel.value });
    }
    addDialogVisible.value = false;
    fetchData();
};

fetchData();

const handleCurrentChange = (val) => {
    currentPage.value = val;
    fetchData();
};
</script>

<template>
    <el-card>
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
            <el-input v-model="searchKeyword" placeholder="请输入姓名搜索" style="width: 200px;" @keyup.enter="search">
                <template #prefix>
                    <el-icon>
                        <Search />
                    </el-icon>
                </template>
            </el-input>
            <el-button type="primary" style="width:100px" :icon="Plus" @click="showAddDialog">添加</el-button>
        </div>

        <el-table :data="filterTableData" style="width: 100%; height: auto;">
            <el-table-column label="姓名" prop="name" />
            <el-table-column label="昵称" prop="nickname" />
            <el-table-column label="联系方式" prop="iphone" />
            <el-table-column label="密码" prop="password" />
            <el-table-column label="身份" prop="role" :filters="roleOptions" :filter-method="filterData" />
            <el-table-column label="状态" prop="status" :filters="statusOptions" :filter-method="filterData">
                <template #default="{ row }">
                    <span :style="{ color: row.status === '在线' ? 'green' : 'red' }">{{ row.status }}</span>
                </template>
            </el-table-column>
            <el-table-column align="right">
                <template #default="{ row }">
                    <el-button size="small" @click="showDialog(row)">Edit</el-button>
                    <el-button size="small" type="danger" @click="deleteData(row)">Delete</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="editDialogVisible" title="编辑用户信息" width="30%">
            <el-form :model="roleModel" :rules="rules" label-width="100px" style="padding-right: 40px;">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="roleModel.name"></el-input>
                </el-form-item>
                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="roleModel.nickname"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="iphone">
                    <el-input v-model="roleModel.iphone"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="roleModel.password"></el-input>
                </el-form-item>
                <el-form-item label="身份" prop="role">
                    <el-select v-model="roleModel.role" placeholder="请选择身份">
                        <el-option v-for="role in roleOptions" :key="role.value" :label="role.text" :value="role.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="roleModel.status" placeholder="请选择状态">
                        <el-option v-for="status in statusOptions" :key="status.value" :label="status.text" :value="status.value" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span>
                    <el-button @click="editDialogVisible = false">取消</el-button>
                    <el-button @click="updateRole">确认</el-button>
                </span>
            </template>
        </el-dialog>

        <el-dialog v-model="addDialogVisible" title="添加用户信息" width="30%">
            <el-form :model="roleModel" :rules="rules" label-width="100px" style="padding-right: 40px;">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="roleModel.name"></el-input>
                </el-form-item>
                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="roleModel.nickname"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="iphone">
                    <el-input v-model="roleModel.iphone"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="roleModel.password"></el-input>
                </el-form-item>
                <el-form-item label="身份" prop="role">
                    <el-select v-model="roleModel.role" placeholder="请选择身份">
                        <el-option v-for="role in roleOptions" :key="role.value" :label="role.text" :value="role.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="roleModel.status" placeholder="请选择状态">
                        <el-option v-for="status in statusOptions" :key="status.value" :label="status.text" :value="status.value" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span>
                    <el-button @click="addDialogVisible = false">取消</el-button>
                    <el-button @click="addRole">确认</el-button>
                </span>
            </template>
        </el-dialog>

        <el-pagination background layout="prev, pager, next" :total="originalTableData.length" :current-page="currentPage" :page-size="pageSize" @current-change="handleCurrentChange" style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px;" />
    </el-card>
</template>

<style scoped lang="scss">
.el-table {
    overflow: auto !important; 
}

.el-pagination {
    margin-top: 20px; 
}
</style>
